<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Dashboard</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/bootstrap.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/dashboard/css/dashboard.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/table-export/tableexport.min.css}"/>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

    <!--<link rel="stylesheet" type="text/css" th:href="@{/bootstrap-3.3.7-dist/css/htmleaf-demo.css}"/>-->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar"
                        aria-controls="bs-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">@hj</a>
            </div>
            <nav id="bs-navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Rubric <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-pencil" aria-hidden="true"></i>New Rubric</a></li>
                            <li><a href="#"><i class="fa fa-th-list" aria-hidden="true"></i>Rubric List</a></li>
                            <!--<li role="separator" class="divider"></li>-->
                            <!--<li><a href="#">Separated link</a></li>-->
                        </ul>
                    </li>

                    <li>
                        <a href="../getting-started/">Import Student Excel</a>
                    </li>

                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <!-- <li><a href="http://mb.bootcss.com" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'themes'])" target="_blank">主题/模板</a></li> -->
                    <li>
                        <a th:href="@{/teacher/logout}" title="Log Out">Logout
                            <i class="fa fa-sign-out"></i>
                        </a>
                        <!--<a href="http://www.bootcss.com/"-->
                           <!--onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', 'V3导航-Bootstrap中文网'])"-->
                           <!--target="_blank">Logout</a>-->
                    </li>
                </ul>
            </nav>
        </div>
    </header>


    <div class="container bs-docs-container">

        <div class="row">
            <div class="col-md-12" role="main" >

                <table id="myTable" class="table table-bordered table-hover tablesorter">
                    <thead>
                    <tr>
                        <th>View</th>
                        <th>Student ID</th>
                        <th>Name</th>
                        <th th:each="rule:${rules}" th:text="${rule.name}+'--'+${rule.percentage}+'%'">Item A</th>
                        <th>Score</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="student:${students}">
                        <td> <a target="_blank" href="#" th:href="@{/teacher/mark/detail/__${classes}__/__${student.studentid}__}" > Detail </a></td>
                        <td th:text="${student.studentid}">001</td>
                        <td th:text="${student.chinesename}">hejing</td>
                        <td th:each="rule:${rules}" item="selectmark"></td>
                        <td></td>

                    </tr>



                    </tbody>
                </table>


            </div>


        </div>

    </div>




<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
    <script th:src="@{/js/jquery-3.0.0.min.js}"></script>
    <script th:src="@{/bootstrap-3.3.7-dist/js/bootstrap.js}" type="text/javascript"></script>

    <script th:src="@{/tablesorter/jquery.tablesorter.min.js}"></script>
    <script th:src="@{/table-export/tableexport.min.js}"></script>
    <script th:src="@{/table-export/blob.js}"></script>
    <script th:src="@{/table-export/FileSaver.min.js}"></script>
    <script th:src="@{/table-export/xlsx.core.min.js}"></script>

    <script th:inline="javascript">
        /*<![CDATA[*/

        var _rules = /*[[${rules}]]*/
        var classes = /*[[${classes}]]*/
        var scores = /*[[${scores}]]*/



            $('#myTable td').dblclick(function(){
                var item = $(this).attr('item');
                if(item == "selectmark"){
                    var selectStr = "<select id='editOprator' onchange='saveScore(this)'>" +
                        "<option value='N'>Pick</option>"+
                        "<option value='A'>A</option>"+
                        "<option value='B'>B</option>"+
                        "<option value='C'>C</option>"+
                        "<option value='D'>D</option>"+
                        "<option value='F'>F</option>"+
                        "</select>";
                    $(this).html(selectStr);
                }


            });



        //studentid,rubricid,ruleid,percentage,item
        function saveScore(obj){
            var cellX = $(obj).parent().parent().index();
//            alert(a);
            var studentid = $(obj).parent().parent().children().eq(1).text();
            var selectedValue = $(obj).children('option:selected').text();
            var numcell = $('#myTable tr:eq(0)').children().length;
            var trobj = $(obj).parent().parent();

            var points = 0;
            var arr=[];
            var callAjax = true;

            $(obj).parent().children().eq(0).text(selectedValue);
//            var aaa = $(trobj).children().eq(2+i).text();
//            console.log(aaa);
//            alert(aaa);
//            alert(typeof(aaa));
            for(var i = 0;i<_rules.length;i++){
                var letter = $(trobj).children().eq(3+i).text();

                if(letter == '' || letter == undefined || letter == null){
                    callAjax = false;
//                    alert(letter);

                }
                var xx ={}, yy={};
                xx['studentid'] = studentid;
                xx['rubricid']  = _rules[i].rubricid;
                xx['ruleid']    = _rules[i].id;
                xx['item'] = _rules[i].name;
                xx['score'] = letter;
                xx['classes'] = classes;
                xx['x'] = cellX;
                xx['y'] = 3+i;
                arr.push(xx);
                yy['studentid'] = studentid;
                yy['rubricid']  = _rules[i].rubricid;
                yy['ruleid']    = _rules[i].id;

                //call cal() fucntion
                points = points + cal(letter,_rules[i].percentage);

            }
            yy['item'] = "total";
            yy['score'] = points;
            yy['classes'] = classes;
            yy['x'] = cellX;
            yy['y'] = numcell - 1;
            arr.push(yy);


            var d = JSON.stringify(arr);
//            console.log(d);
//            console.table(arr);

            if(callAjax){
//                alert("yyy");
                $.ajax({
                    type:"POST",
                    url:"/teacher/updateScore",
                    data:{"d":d},
                    dataType:'json',
                    success:function(data){
//                        alert(data.msg);
//                        $(window.location).attr('href', '/teacher/dashboard');
                    },
                    complete:function () {


                    }

                });
            }


            $(obj).parent().parent().children().eq(numcell - 1).text(points);
            $("#myTable").trigger("update");
            $("#myTable caption").remove();
            eTable();
            $(obj).parent().text(selectedValue);
            //alert(numcell);

        }

        $("#myTable th").click(function(){
            $("#myTable").trigger("update");

            $("#myTable caption").remove();
            eTable();
        });

        function cal(letter,percentage){
            var result=0;
            switch(letter){
                case 'A':
                    result = percentage; break;
                case 'B':
                    result = percentage/4*3;break;

                case 'C':
                    result =  percentage/4*2;break;
                case 'D':
                    result =  percentage/4;break;
                case 'F':
                    result =  0;break;
                default:
                    result = 0; break;

            }
            return result;
        }


        //studentid,rubricid,ruleid,percentage,item
        function saveScore1(obj,studentid){
//            console.table(_rules);
//            alert(studentid+ rubricid+ruleid+percentage+item);
            var selectedValue = $(obj).children('option:selected').text();
//            alert(selectedValue);

//            var point = cal(selectedValue,percentage);
            var numcell = $('#myTable tr:eq(0)').children().length;
            var trobj = $(obj).parent().parent();
//            alert(typeof(_rules));
            var points = 0;
            var arr=[];
            var callAjax = true;

            $(obj).parent().children().eq(0).text(selectedValue);

            for(var i = 0;i<_rules.length;i++){
                var letter = $(trobj).children().eq(3+i).children().children('option:selected').text();
//                alert("====="+_rules[i].percentage);

                if(letter == "Pick"){
                    callAjax = false;
                }
                var xx ={}, yy={};
                xx['studentid'] = studentid;
                xx['rubricid']  = _rules[i].rubricid;
                xx['ruleid']    = _rules[i].id;
                xx['item'] = _rules[i].name;
                xx['score'] = letter;
                arr.push(xx);
                yy['studentid'] = studentid;
                yy['rubricid']  = _rules[i].rubricid;
                yy['ruleid']    = _rules[i].id;
                //call cal() fucntion
                points = points + cal(letter,_rules[i].percentage);

            }
            yy['item'] = "total";
            yy['score'] = points;
            arr.push(yy);


            var d = JSON.stringify(arr);
//            console.log(d);
//            console.table(arr);

            if(callAjax){
//                alert("yyy");
                $.ajax({
                    type:"POST",
                    url:"/teacher/updateScore",
                    data:{"d":d},
                    dataType:'json',
                    success:function(data){
//                        alert(data.msg);
//                        $(window.location).attr('href', '/teacher/dashboard');
                    },
                    complete:function () {


                    }

                });
            }


            $(obj).parent().parent().children().eq(numcell - 1).text(points);
            $("#myTable").trigger("update");
            eTable();
            //alert(numcell);

        }
        // cal score function
        function cal1(letter,percentage){
            var result=0;
            switch(letter){
                case 'A':
                    result = percentage; break;
                case 'B':
                    result = percentage/4*3;break;

                case 'C':
                    result =  percentage/4*2;break;
                case 'D':
                    result =  percentage/4;break;
                case 'F':
                    result =  0;break;
                default:
                    result = 0; break;

            }
            return result;
        }

//        $("#myTable tr:eq(0) th").click(function(){
//            $("#myTable").tablesorter();
//        });

        $(document).ready(function(){
            $(function(){
                $("#myTable").tablesorter();
            });
        });

        function eTable(){
            $("#myTable").tableExport({

                formats:["xlsx"],                       //  ["xlsx","xls","csv","txt"]
                headings: true,                         // [Boolean], display table headings (th elements) in the first row, [default: true]
                buttonContent: "Export",                // [String], text/html to display in the export button, [default: "Export file"]
                addClass: "",                           // [String], additional button classes to add, [default: ""]
                defaultClass: "btn",                    // [String], the default button class, [default: "btn"]
                defaultTheme: "btn-default",            // [String], the default button theme, [default: "btn-default"]
                type: "csv",                            // [xlsx, csv, txt], type of file, [default: "csv"]
                fileName: classes,                     // [id, name, String], filename for the downloaded file, [default: "export"]
                position: "top",                     // [top, bottom], position of the caption element relative to table, [default: "bottom"]
                stripQuotes: true,
                bootstrap: true
            });
        }



        $(document).ready(function(){
            for(var i = 0;i<scores.length;i++){

                //$("#table3 tr:gt(0):eq(1) td:eq(2)").text();
                $("#myTable tr:gt(0):eq("+scores[i].x+" ) td:eq("+scores[i].y +")").text(scores[i].score);
//                console.log(scores[i].x + " " +scores[i].y + " " +scores[i].score);
            }
            eTable();
        });



        /*]]>*/
    </script>
</body>
</html>